import React, { useState } from 'react'
import './myOrder.scss'
import {
  LeftOutlined,
  CheckCircleTwoTone,
  HeartTwoTone
} from '@ant-design/icons';
export default function myOrder() {
  const [list, setList] = useState([
    { _id: 1, name: '董胖胖', url: 'https://img2.baidu.com/it/u=3641413376,1262242572&fm=253&fmt=auto&app=120&f=JPEG?w=515&h=500', title: '胖胖集选', price: '388', like: '899' },
    { _id: 2, name: '董胖胖', url: 'https://img2.baidu.com/it/u=3641413376,1262242572&fm=253&fmt=auto&app=120&f=JPEG?w=515&h=500', title: '生委大都督', price: '499', like: '678' },
    { _id: 3, name: '董胖胖', url: 'https://img2.baidu.com/it/u=3641413376,1262242572&fm=253&fmt=auto&app=120&f=JPEG?w=515&h=500', title: '都督', price: '899', like: '329' },
  ])

  return (
    <div>
      <div className="mythree_top">
        <p><LeftOutlined /></p>
        <h3>我的订单</h3>
        <div></div>
      </div>
      <div className='order'>
        {list.map((i) => (
          <div className="box" key={i._id}>
            <div className="img">
              <img src={i.url} alt="" />
            </div>
            <div>
              <p className='blue'>{i.name}&nbsp;<CheckCircleTwoTone /></p>
              <p>{i.title}</p>
              <div className='box_m'>
                <p className='red'>￥{i.price}</p>
                <p className='gray'><HeartTwoTone twoToneColor="#a9a9a9" />{i.like}</p>
              </div>
            </div>

          </div>
        ))}
      </div>
    </div>
  )
}

